<template>
<div class="status-tip" @tap='check'>
    <div class="status-tip-container" :style='{ borderColor: status.color}' >
        <div class="active" v-if='isChecked' :style='{background: status.color}'>
        </div>
    </div>
</div>

</template>

<script>
import getStatus  from '@/utils/tagStatus'

export default {
    props: ['type', 'checked'],
    data: function() {	
        return {
            isChecked: false,
        }
    },
    watch:{
        checked(newVal, oldVal){
           this.isChecked = newVal;
        }
    },
    computed: {
        status(){
            return getStatus(this.type);
        },
    },

    methods: {
        check(){

            wx.showToast({
                title: this.status.label,
            })
            
            this.isChecked = !this.isChecked;
            this.$emit('tap', {
                ...this.status,
                checked: this.isChecked
            });
        }
    },

    created(){
        this.isChecked = this.checked;
    }
}
</script>

<style scoped lang='less'>

@size: 24rpx;

.status-tip{
    display: inline-block;
    padding: 10rpx 20rpx;
}

.status-tip-container{
    
    overflow: hidden;
    position: relative;
    display: inline-block;
    width: @size;
    height: @size;
    border-radius: 100%;
    border: 6rpx solid @grayColor;

   
}
.active{
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
    width: 100%;
    height: 100%;
    background: #000;
}

</style>